<template>
  <div>
    <el-table :data="currentData">
      <el-table-column width="50" prop="id" label="编号"></el-table-column>-->
      <el-table-column width="130" prop="name" label="职位名称"></el-table-column>
      <el-table-column width="130" prop="remark" label="群组角色"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button-group>
            <el-button @click="handleEdit(scope.$index, scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button>
            <el-button @click="handleDelete(scope.$index, scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button>
          </el-button-group>
          <el-dialog title="编辑职位" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="职位编号" :label-width="formLabelWidth">
                <el-input v-model="form.id" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="职位名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="群组角色" :label-width="formLabelWidth">
                <el-select v-model="form.remark" :placeholder="form.remark" value="">
                  <el-option label="普通管理员" value="普通管理员"></el-option>
                  <el-option label="超级管理员" value="超级管理员"></el-option>
                  <el-option label="会计" value="会计"></el-option>
                  <el-option label="服务员" value="服务员"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveEditPosition">确 定</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      hide-on-single-page
      background
      :total="pageNum"
      :page-size="3"
      :page-count="7"
      :current-page="currentPage"
      @current-change="changePage"
    >
    </el-pagination>
  </div>
</template>

<script>
    import * as url from '../../../api/lypApi'
    import {mapActions,mapState} from 'vuex'
    export default {
        name: "PositionTable",
        methods:{
            saveEditPosition(){
                this.dialogFormVisible = false
                console.log(this.form)
                this.$axios({
                    url:`/lypApi${url.UPDATEPOSITION}`,
                    method:'post',
                    data:this.form
                }).then(res=>{
                    console.log(res)
                    this.getPositionData()
                })
            },
            handleEdit(index, row) {
                this.dialogFormVisible = true
                console.log(index, row);
                this.form.id=row.id
                this.form.name=row.name
                this.form.remark=row.remark
            },
            handleDelete(index, row) {
                console.log(row.id);
                this.$store.dispatch('deletePositionData',row)
            },
            changePage(val){
                console.log(val)
                this.currentPage = val
            },
            ...mapActions(['getPositionData']),
        },
        data(){
            return {
                currentPage:1,
                dialogFormVisible: false,
                form: {
                    name: '',
                    remark: '',
                    id:''
                },
                formLabelWidth: '120px'
            }
        },
        computed:{
            ...mapState({
                tableData:function (state) {
                    return state.lypStore.position.positionTableData
                }
            }),
            currentData(){
                let begin = (this.currentPage -1) * 3
                let end = (this.currentPage -1) * 3+3
                return this.tableData.slice(begin,end)
            },
            pageNum(){
                return this.tableData.length
            }
        },
        created() {
            this.getPositionData()

        },
        watch:{
            currentData(){
                console.log(this.currentData)
            },
        }

    }
</script>
<style scoped>

</style>
